<template>
	<view class="login-page">
		<view class="bg">
			<view class="icon_box">
				<text class="iconfont icon-fanhui" @click="back"></text>
			</view>
		</view>
		<view class="login-form">
			<view class="title">
				注册
			</view>
			<view class="login-form-item">
				<input v-model="mobile" maxlength="11" placeholder="请输入手机号" />
				<iconfont icon="phone" color="#999999"></iconfont>
			</view>
			<view class="login-form-item ">
				<input v-model="smscode"  maxlength="20" placeholder="请输入邀请码" />
			    
			</view>
			<view class="login-form-item ">
				<input v-model="password" type="password" maxlength="20" placeholder="请输入密码" />
			    <iconfont icon="password" color="#999999"></iconfont>
			</view>
			<view class="operation">
				<text @click="navtoLogin">登录</text>
		    </view>
			<button class="big-btn" type="primary" @click="RegisterFn">注册</button>  
		</view> 
		<!-- 验证码 -->
		<u-verification-code :seconds="60"  ref="uCode"
		@change="codeChange"></u-verification-code>
	</view>
</template>
<script>
import { REGEX } from '@/common/env.js'
export default {
	data() {
		return {
			mobile: '', // 手机号
			password: '', // 密码
			smscode: '' ,// 验证码
			tips: ''
		}
	},
	methods: {
		// 注册按钮
		async RegisterFn() {
			if (this.mobile == '') {
				this.$u.toast('手机号不能为空')
				return
			}
			
			if (this.smscode == '') {
				this.$u.toast('邀请码不能为空')
				return
			}
			
			if (this.password == '') {
				this.$u.toast('密码不能为空')
				return
			}
			const params = {
				type: 'register',
				mobile: this.mobile,
				smscode: this.smscode,
				password: this.password
			}
			const res = await this.http.httpRequest('/login/registerOrFind','post', params)
			if (res.data.code == 1) {
				this.$u.toast('注册用户成功')
				setTimeout(() => {
				  uni.navigateTo({
				  	url:'/pages/login/login'
				  })	
				}, 500)
			} else {
				this.$u.toast('注册用户失败')
			}
		},
		async getCode() {
			if(this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				if (this.mobile === '') {
					this.$u.toast('请输入手机号码');
				} else {
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await this.http.httpRequest('/login/registerOrFind','post',{ type: 'send', mobile: this.mobile})
					if (res.data.code == 1) {
						uni.hideLoading();
					// 		// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
					// 		// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
					} else {
						uni.hideLoading();
						this.$u.toast('手机格式错误，获取验证码失败');
					}
				}
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		codeChange (text) {
			 this.tips = text; 
		},
		back () {
			uni.navigateBack({
				delta: 2
			})
		},
		navtoLogin () {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}
}
</script>
<style lang="scss">
.login-page {
	height: 100%;
	// padding: 140upx 40upx 40upx;
	color: #333;
	background-color: #FFFFFF;
	box-sizing: border-box;
}
.bg {
	width: 100%;
	height: 450rpx;
	background-color: #ceb686;
	.icon_box {
		padding-top: 70rpx;
		padding-left: 18rpx;
		.iconfont {
			font-size: 56rpx;
			color: #FFFFFF;
		}
	}
}
.login-form {
	box-sizing: border-box;
	border-radius: 24rpx;
	padding: 40rpx 80rpx;
	border: 2rpx solid #efefef;
	width: 680rpx;
	height: 720rpx;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #FFFFFF;
}
.login-form .title {
	font-weight: 600;
	line-height: 56rpx;
	text-align: center;
	margin-bottom: 60rpx;
}

.login-page input {
	padding: 0 20upx 0 0upx;
	height: 90upx;
	line-height: 90upx;
	text-align: left;
}

.login-page .login-form-item {
    position: relative;
    margin-bottom: 40upx;
    font-size: 30upx;
	border-bottom: 1px solid #e8e3e3;
}
.login-form-item .code {
	position: absolute;
	right: 0upx;
	top: 24upx;
	width: 180rpx;
	height: 40upx;
	font-size:26rpx;
	// padding-right: 20upx;
	color: #999
}
.login-page .login-form-item .iconfont {
	position: absolute;
	right: 20upx;
	top: 24upx;
	width: 40upx;
	height: 40upx;
	font-size: 40upx;
	padding-right: 20upx
}
.operation {
	margin-top: -14upx;
	display: flex;
	justify-content: flex-end;
	right: 24rpx;
	text {
		padding-left: 12rpx;
		color: #ceb686;
		font-size: 28rpx;
	}
}

.common-btn {
	margin: 100upx auto;
}
.big-btn {
	margin-top: 120rpx;
	width: 480rpx;
}

</style>
